<!-- saveAunt 保存已选阿姨 -->
<template>
	<div>
		<div class="head">
			<div class="title"><span>保存已选阿姨</span></div>
			<div class="sanj"></div>
		</div>
		<div class="form">
			<ul>
				<li><input type="number" name="phone" placeholder="输入手机号" v-model="row.phone"></li>
				<li>
					<input type="number" class="code" name="code" placeholder="验证码" v-model="code">
					<span class="getcode" @click="getVerificationCode">{{codeText}}</span>
				</li>
				<li><span class="signIn" @click="addGeneralize">继续挑选</span></li>
			</ul>
		</div>
	</div>
</template>

<script>
	import _Bank from '@/assets/utils/bank'
	export default{
		name:'saveAunt',
		data(){
			return{
				isGetCode:true,
				VerificationCode:'',
				code:'',
				codeText:'获取验证码',
				row:{
					phone: '',
					work_type:'月嫂',
					city: '北京',
					skill: '',
					customer_need: '',
					expected_date: '',
					baby_age: '',
					source:'SEM推广',
					source_url: window.location.href
				},
				time:60,
			}
		},
		watch:{
			
		},
		methods:{
			countDown(){
				let self = this
				if (self.time >0) {
					setTimeout(function(argument) {
						self.time = self.time -1
						self.codeText = self.time+'秒'
						self.countDown()
					},1000)
				}else{
					this.isGetCode = true
					this.codeText = '获取验证码'
					this.time = 60
				}
			},
			getVerificationCode(){
				if (this.isGetCode) {
					if (_Bank.checkPhone(this.row.phone)) {
						this.codeText = '60秒'
						this.isGetCode = false
						this.countDown()
						let config = {
							baseURL:'http://admin.mumway.com/index/sms/',
						}
						this.$http.post('getVerificationCode?', {phone: this.row.phone}, config)
						.then(response=>{
							if (response.success) {
								this.VerificationCode = response.code
							}
						})
					}else{
						alert('请输入正确的手机号码')
					}
				}

			},
			addGeneralize(){
				if (this.code == this.VerificationCode) {

					if (_Bank.checkPhone(this.row.phone)) {
						this.$http.post('addGeneralize', {row:this.row})
						.then(response=>{
							if (response.success) {
								this.$emit('input', '');
								
							}
						})
					}else{
						alert('请输入正确的手机号码')
					}
				}else{
					alert('验证码错误')
				}

			},
		},
		mounted(){
			this.row.source = this.$store.getters.getSource
			
		}
	}
</script>

<style scoped lang="scss">
@import '@/assets/utils/utils.scss';

div.form{
	padding-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 50px;
	ul{
		li{
			margin-top: 30px;
			input{
				width: 100%;
				height: 90px;
				border:1px solid #999;
				background-color: #fff;
				padding:0 20px;
			}
			input.code{
				width: 220px;
			}
			.signIn,
			.getcode{
				display: inline-block;
				height: 90px;
				line-height: 90px;
				text-align: center;
				width: 240px;
				broder:1px solid #e1e1e1;
				background-color: #b6b4b4;
				color: #666;
				border-radius:10px;
				font-size: 30px;
				margin-left: 18px;
			}
			.signIn{
				background-color: #e77064;
				width: 100%;
				color: #fff;
				margin-left: 0px;
				margin-top: 40px;

			}
		}
	}
}
.head{
	width: 100%;
	height: 156px;
	background-color: #fff;
	text-align: center;
	padding-top:50px;
	border-radius: 8px 8px 0 0;
	position: relative;
	.sanj{
		position: absolute;
		bottom:-45px;
		left:50%;
		width: 60px;
		height: 60px;
		border-radius:16px;
		background-color: #e4e3e3;
		margin-left: -30px;
		transform: rotate(45deg)

	}
	.title{
		font-size: 30px;
		font-weight: bold;
		color: #333;
		span{
			position: relative;
			display: inline-block;
			padding:0 30px;
			&:before,
			&:after{
				content:'';
				position: absolute;
				top:20px;
				width: 80px;
				height: 4px;
				background-color: #333;
				display: inline-block;
			}
			&:before{
				left:-80px;
			}
			&:after{
				right:-80px;
			}

		}
	}
	.dec{
		font-size: 24px;
		color: #333;
		margin-top: 10px;
	}

}

</style>